<template>
    <div class="coupon-item"
         v-bind:style="{backgroundImage: getBackgroundImageUrl}">
      <div class="coupon-item-left">
        <p>{{ '¥' + item.money }}</p>
      </div>
      <div class="coupon-item-right">
        <p>{{ item.title }}</p>
        <p>{{ item.condition }}</p>
        <p>{{ item.explain }}</p>
        <p>{{ item.validTime }}</p>
        <input v-show="item.isShow" :class="item.sign===1?'active':''"   type="button" @click="couponClick(item)">
      </div>
    </div>

</template>

<script>
  export default {
    name: 'coupon',
    props: {
      item: {
        type: Object,
        default: {}
      }
    },
    data(){
      return{
        sign:0
      }
    },
    created(){
    },
    computed: {
      getBackgroundImageUrl() {
        switch (this.$props.item.status) {
          case 0: { // 未激活
            return `url(${require('../assets/img/coupon/coupons_list_background_unactive.png')})`
          }
          case 1: { // 可使用
            return this.$props.item.isShow===1?'url(' + require('../assets/img/coupon/coupons_list_background_orange.png') + ')':'url(' + require('../assets/img/coupon/coupons_list_background_gray.png') + ')'
          }
          case 2: { // 不可用
            return 'url(' + require('../assets/img/coupon/coupons_list_background_gray.png') + ')'
          }
          case 3: { // 已过期
            return 'url(' + require('../assets/img/coupon/coupons_list_background_gray.png') + ')'
          }
          case 4: { // 已失效
            return 'url(' + require('../assets/img/coupon/coupons_list_background_gray.png') + ')'
          }
          default: { // 去火星了
            return `url(${require('../assets/img/coupon/coupons_list_background_gray.png')})`
          }
        }
      },
      getRightImageUrl() {
        switch (this.$props.item.status) {
          case 0:{
            return require('../assets/img/coupon/right_orange_icon.png')
          }
          case 1:{
            return require('../assets/img/coupon/right_white_icon.png')
          }
          case 2:{
            return require('../assets/img/coupon/right_gray_icon.png')
          }
          case 3:{
            return require('../assets/img/coupon/right_white_icon.png')
          }
          default :
            return require('../assets/img/coupon/right_gray_icon.png')
        }
      },
      getTitleWidth() {
        let leftDivWidth = document.getElementsByClassName("coupon-item-left")[0].offsetWidth;
        consol.log(leftDivWidth - 80);
        return 123
      },
      getBtnTitle() {
        switch (this.$props.item.status) {
          case 0: { // 未激活
            return `未激活`
          }
          case 1: { // 去使用
            return '去使用'
          }
          case 2: { // 不可用
            return '不可用'
          }
          case 3: { // 已使用
            return '已使用'
          }
          case 4: { // 已失效
            return '已失效'
          }
          default: { // 去火星了
            return `去火星了`
          }
        }
      },
      getBtnActive() {
        switch (this.$props.item.status) {
          case 0: { // 立即领取
            return false
          }
          case 1: { // 去使用
            return false
          }
          case 2: { // 已抢光
            return true
          }
          case 3: { // 已使用
            return true
          }
          default: { // 去火星了
            return true
          }
        }
      }
    },
    methods: {
      couponClick (item) {
        let sign=''
        if(!this.item.sign){
          sign=1
        }else{
          sign=0
        }
        this.$emit('selectCoupon', item.id,sign)
      }
    },
    watch: {

    }

  }
</script>

<style scoped lang="scss">
  div.coupon-item {
    /*margin-bottom: 20px;*/
    position: relative;
    margin: 0 0 5px 0;
    height: 100px;
    background-size:100% 100%;
    overflow: hidden;
    >div:first-child {
      position: absolute;
      top: 7%;
      left: 2%;
      width: 26%;
      height: 86%;
      word-wrap:break-word;
      word-break:break-all;
      text-overflow: ellipsis;

      >p {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        height: 20px;
        line-height: 20px;
        text-align: center;
        font-weight: bold;
        font-size: 20px;
        color: rgb(66, 66, 66);
      }
    }

    >div:last-child {
      /*background-color: greenyellow;*/
      position: absolute;
      top: 7%;
      left: 34%;
      width: 63%;
      height: 86%;

      >p {
        position: relative;
        /*display: inline-block;*/
        /*top: 5px;*/
        padding-top: 8px;
        left: 0;
        text-align: left;
        text-overflow: ellipsis;
        height: auto;
        width: 100%;
        white-space:nowrap;
        word-wrap:break-word;
        word-break:break-all;
        overflow: hidden;
        font-size: 12px;
        color: rgb(133, 133, 133);
      }

      >p:first-child {
        color: rgb(66, 66, 66);
        font-size: 14px;
      }

      >input {
        outline: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.2);
        position: absolute;
        right: 3%;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        padding: 0 10px 0 10px;
        text-align: center;
        font-size: 14px;
        height: 25px;
        width: 25px;
        background-color: transparent;
        border: 1px solid orange;
        border-radius: 50%;
        -webkit-appearance: none;
        color: orange;
        background-size: 100% 100%;
      }

      >input:disabled {
        color: rgb(133, 133, 133);
        background-color: transparent;
        /*background-color: rgb(233, 233, 233);*/
        border: 1px solid rgb(133, 133, 133);
        opacity: 0.5;
      }
      >.active{
        background-image: url('../assets/img/activeRed.png');
      }
    }
  }
</style>
